<template>
  <ElCard 
    class="blog-card" 
    shadow="hover"
    :body-style="{ padding: '0' }"
  >
    <!-- 文章封面 -->
    <div class="blog-card__cover" @click="goToDetail">
      <ElImage
        :src="article.cover"
        :alt="article.title"
        fit="cover"
        lazy
      >
        <template #error>
          <div class="image-slot">
            <ElIcon><Document /></ElIcon>
          </div>
        </template>
      </ElImage>
      
      <!-- 分类标签 -->
      <ElTag
        v-if="article.category"
        class="blog-card__category"
        :type="getCategoryType(article.category)"
        effect="dark"
      >
        {{ article.category }}
      </ElTag>
    </div>
    
    <!-- 文章信息 -->
    <div class="blog-card__content">
      <h3 class="blog-card__title" @click="goToDetail">
        {{ article.title }}
      </h3>
      
      <p class="blog-card__summary">
        {{ article.summary }}
      </p>
      
      <!-- 元信息 -->
      <div class="blog-card__meta">
        <div class="meta-item">
          <ElIcon><Calendar /></ElIcon>
          <span>{{ formatDate(article.date) }}</span>
        </div>
        
        <div class="meta-item">
          <ElIcon><View /></ElIcon>
          <span>{{ article.views || 0 }} 阅读</span>
        </div>
        
        <div class="meta-item">
          <ElIcon><ChatDotRound /></ElIcon>
          <span>{{ article.comments || 0 }} 评论</span>
        </div>
      </div>
      
      <!-- 标签 -->
      <div class="blog-card__tags">
        <ElTag
          v-for="tag in article.tags"
          :key="tag"
          size="small"
          effect="plain"
        >
          {{ tag }}
        </ElTag>
      </div>
      
      <!-- 阅读按钮 -->
      <div class="blog-card__footer">
        <ElButton text type="primary" @click="goToDetail">
          阅读全文
          <ElIcon class="el-icon--right"><ArrowRight /></ElIcon>
        </ElButton>
      </div>
    </div>
  </ElCard>
</template>

<script setup>
import { Document, Calendar, View, ChatDotRound, ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'

const props = defineProps({
  article: {
    type: Object,
    required: true
  }
})

const router = useRouter()

// 跳转到详情页
const goToDetail = () => {
  router.push(`/blog/${props.article.id}`)
}

// 格式化日期
const formatDate = (date) => {
  return dayjs(date).format('YYYY-MM-DD')
}

// 获取分类类型
const getCategoryType = (category) => {
  const typeMap = {
    '技术': 'primary',
    '生活': 'success',
    '随笔': 'info',
    '教程': 'warning'
  }
  return typeMap[category] || 'info'
}
</script>

<style lang="scss" scoped>
.blog-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  @include transition(transform, box-shadow);
  
  &:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
  }
  
  &__cover {
    position: relative;
    height: 200px;
    overflow: hidden;
    cursor: pointer;
    
    .el-image {
      width: 100%;
      height: 100%;
      @include transition(transform);
    }
    
    &:hover .el-image {
      transform: scale(1.1);
    }
    
    .image-slot {
      @include flex-center;
      width: 100%;
      height: 100%;
      background: var(--bg-secondary);
      color: var(--text-secondary);
      font-size: 48px;
    }
  }
  
  &__category {
    position: absolute;
    top: $spacing-md;
    left: $spacing-md;
  }
  
  &__content {
    padding: $spacing-lg;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  &__title {
    font-size: $font-size-xl;
    font-weight: $font-weight-semibold;
    margin-bottom: $spacing-sm;
    cursor: pointer;
    color: var(--text-primary);
    @include transition(color);
    @include line-clamp(2);
    
    &:hover {
      color: $primary-color;
    }
  }
  
  &__summary {
    font-size: $font-size-base;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: $spacing-md;
    @include line-clamp(3);
  }
  
  &__meta {
    display: flex;
    gap: $spacing-lg;
    margin-bottom: $spacing-md;
    flex-wrap: wrap;
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: $spacing-xs;
      font-size: $font-size-sm;
      color: var(--text-secondary);
      
      .el-icon {
        font-size: 14px;
      }
    }
  }
  
  &__tags {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-sm;
    margin-bottom: $spacing-md;
  }
  
  &__footer {
    margin-top: auto;
    padding-top: $spacing-md;
    border-top: 1px solid var(--border-color);
  }
}
</style>

